<template>
	<view class="back-nav" :style="{ backgroundColor: bgColor, color: textColor }">
		<!-- 状态栏占位（自动获取系统高度） -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }" />

		<!-- 导航区 -->
		<view class="nav-bar">
			<view class="btn-back" @click="onBack">
				<!-- <uni-icons type="arrow-left" size="25" v-if="showBack"></uni-icons> -->
				 <u-icon  v-if="showBack" size="30" name="arrow-leftward"></u-icon>
			</view>
			<view class="nav-title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BackNav',
		props: {
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			textColor: {
				type: String,
				default: '#000000'
			},
			showBack: {
				type: Boolean,
				default: true
			}
		},

		emits: ['back'],

		data() {
			return {
				// 状态栏高度（px）
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight || 0
			};
		},

		methods: {
			/* 返回按钮触发 */
			onBack() {
				// 默认：返回上一页
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
				// 同时把事件抛给父组件，可自定义额外逻辑
				this.$emit('back');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.back-nav {
		padding-top: 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 998;
		/* 不给 border-bottom 就是无线 */
	}

	.status-bar {
		width: 100%;
	}

	.nav-bar {
		height: 88rpx; // 44px 标准导航高度
		display: flex;
		align-items: center;
		position: relative;
	}

	.btn-back {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		font-weight: 500;
	}

	/* 图标字体，也可以换成 <image> */
	.iconfont.icon-arrow-left::before {
		content: '\e60c'; // 自己项目有图标库就换
	}
</style>